<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>大麦商城</title>
<link href="css/common.css" rel="stylesheet" type="text/css"/>
<link href="css/cart.css" rel="stylesheet" type="text/css"/>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/damai.js"></script>
</head>
<body>
<div id="app">
	<damai>
		<div class="container cart">

		<div class="span24">
		
			<div class="step step1">
				<ul>
					
					<li  class="current"></li>
					<li  >生成订单成功</li>
					<li  >订单号:73</li>
				</ul>
			</div>
		
				<table>
					<tbody>
					<tr>
						<th>图片</th>
						<th>商品</th>
						<th>价格</th>
						<th>数量</th>
						<th>小计</th>
					</tr>
					
						<tr v-for="c in carts">
							<td width="60">
								<img :src="c.product.image"/>
							</td>
							<td>
								<a>{{c.product.pname}}</a>
							</td>
							<td>
								{{c.product.shopPrice}}
							</td>
							<td class="quantity" width="60">
								{{c.count}}
							</td>
							<td width="140">
								<span class="subtotal">￥{{c.product.shopPrice * c.count}}</span>
							</td>
						</tr>

					
				</tbody>
			</table>
				<dl id="giftItems" class="hidden" style="display: none;">
				</dl>
				<div class="total">
					<em id="promotion"></em>
					商品金额: <strong id="effectivePrice">￥{{carts.map(c=>c.count*c.product.shopPrice).reduce((a,b)=>a+b, 0)}}元</strong>
				</div>
			<form id="orderForm" action="msg.html" method="post">
				<input type="hidden" name="order.oid" value="73"/>
				<div class="span24">
					<p>
							收货地址：<input v-model="orders.addr" type="text" value="天子脚下" style="width:350px" />
								<br />
							收货人&nbsp;&nbsp;&nbsp;：<input v-model="orders.name" type="text" value="Song" style="width:150px" />
								<br /> 
							联系方式：<input v-model="orders.phone" type="text" value="13283718600" style="width:150px" />

						</p>
						<hr />
						<p>
							选择银行：<br/>
							<input type="radio" name="pd_FrpId" value="ICBC-NET-B2C" checked="checked"/>工商银行
							<img src="bank_img/icbc.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="BOC-NET-B2C"/>中国银行
							<img src="bank_img/bc.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="ABC-NET-B2C"/>农业银行
							<img src="bank_img/abc.bmp" align="middle"/>
							<br/>
							<input type="radio" name="pd_FrpId" value="BOCO-NET-B2C"/>交通银行
							<img src="bank_img/bcc.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="PINGANBANK-NET"/>平安银行
							<img src="bank_img/pingan.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="CCB-NET-B2C"/>建设银行
							<img src="bank_img/ccb.bmp" align="middle"/>
							<br/>
							<input type="radio" name="pd_FrpId" value="CEB-NET-B2C"/>光大银行
							<img src="bank_img/guangda.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="CMBCHINA-NET-B2C"/>招商银行
							<img src="bank_img/cmb.bmp" align="middle"/>
						</p>
						<hr />
						<p style="text-align:right">
							<a href="#" @click.prevent="commit">
								<img src="images/finalbutton.gif" width="204" height="51" border="0" />
							</a>
						</p>
				</div>
			</form>
		</div>
		
	</div>
	</damai>
</div>
<script>
	var v = new Vue({
		el: "#app",
		data: {
			carts: [],
			orders: {addr: "", phone: "", name: ""}
		},
		created() {
			axios.get("/cart/mycart").then(res => {
				this.carts = res.data;
			})
		},
		methods:{
			commit(){
				this.orders.items = this.carts;
				//json 格式传递数据
				axios.post("orders/commit",this.orders).then(res=>{
					if(res.data.code == 1){
						alert("订单提交成功!");
						location.href = "/olist.html";
					}else{
						alert(res.data.msg);
					}
				})
			}
		}
	})
</script>
</body>
</html>